<template>
    <div class="addStandard">
         <div style="margin-bottom:50px">
            <van-cell-group style="text-align:left">
                <van-field
                    label-class='fw'
                    name="标准名称"
                    v-model="form.fname"
                    label="标准名称:"
                    v-validate="'required'"
                    data-vv-scope="registerForm"
                    :error="errors.has('registerForm.标准名称')"
                    :error-message="errors.first('registerForm.标准名称')"
                    required
                    placeholder="请输入标准名称">
                </van-field>
                <van-field
                    name="委托单位"
                    label="委托单位:"
                    v-validate="'required'"
                    data-vv-scope="registerForm"
                    :error="errors.has('registerForm.委托单位')"
                    :error-message="errors.first('registerForm.委托单位')"
                    required
                    is-link 
                    readonly
                    :value="form.fcustomername" 
                    @click="showFdeptClick">
                </van-field>
                <van-popup 
                    v-model="showFdept" 
                    get-container="body" 
                    position='bottom'
                >
                    <van-picker 
                        title='请选择委托单位' 
                        :columns="columnsCompany"
                        show-toolbar
                        value-key='fname'
                        @cancel="onCancel4fdeptname"
                        @confirm="onConfirm4fdeptname"
                     />
                </van-popup>

                <van-field
                    name="商品"
                    label="商品:"
                    v-validate="'required'"
                    data-vv-scope="registerForm"
                    :error="errors.has('registerForm.商品')"
                    :error-message="errors.first('registerForm.商品')"
                    required
                    is-link 
                    readonly
                    :value="form.fproductname" 
                    @click="showFunctionClick">
                </van-field>
                <van-popup v-model="showFunction" get-container="body" position='bottom'>
                    <van-picker 
                        title='请选择商品' 
                        :columns="columns"
                        show-toolbar
                        value-key='fname'
                        @cancel="onCancel4F"
                        @confirm="onConfirm4F"
                    />
                </van-popup>
            </van-cell-group>
         </div>
         <div class='addStandardBtn' @click="submit">保存</div>
    </div>
</template>

<script>
import {
    searchforwx
} from '@/api/addContract'
import {
    searchlimscustomeridbyuserid
    ,searchcheckbyfdetailidwx
    ,insertcheckwx
    ,editcheckwx
    ,searchlimscustomerproductbyuserid
} from '@/api/addStandard'

import { 
    Button
    ,DropdownMenu
    , DropdownItem
    ,Icon 
    ,Field
    ,DatetimePicker
    ,Popup
    ,Cell
    ,CellGroup
    ,Picker
    ,Switch
    ,RadioGroup
    , Radio 
    ,Checkbox
    , CheckboxGroup 
    ,  Toast} from 'vant';
export default {
    name: 'addStandard',
    components: {
        [Icon.name]:Icon,
        [Button.name]:Button,
        [DropdownMenu.name]:DropdownMenu,
        [DropdownItem.name]:DropdownItem,
        [Cell.name]:Cell,
        [CellGroup.name]:CellGroup,
        [Field.name]:Field,
        [DatetimePicker.name]:DatetimePicker,
        [Popup.name]:Popup,
        [Picker.name]:Picker,
        [Switch.name]:Switch,
        [RadioGroup.name]:RadioGroup,
        [Radio.name]:Radio,
        [Checkbox.name]:Checkbox,
        [CheckboxGroup.name]:CheckboxGroup
    },
    data () {
        return {
            form:{
                fcustomerid:'',
                fcustomername:'',
                fproductid:'',
                fproductname:'',
                fname:'',
            },
            test:'',
            checked:true,
            showTime:false,
            currentDate: new Date(),
            showImplement:false,
            showWork:false,
            showFdept:false,
            showFunction:false,
            columns: [
                { text: '类别一',id:1},
                { text: '商品二' },
                { text: '商品三' }
            ],
            showLevel:false,
            showClass:false,
            radio:'1',
            result:[],
            list:[
                'a','b'
            ],
            columnsCompany:[],
            fdetailid:'',
            type:''
        }
    },
    created(){
        this.type = this.$route.query.type
        this.fdetailid = this.$route.query.fdetailid
        if(this.type == 'edit'){
            searchlimscustomerproductbyuserid({
                userid:'bb5a8fe0-e03e-42ba-a1ed-279bba27b3a3'
            }).then(res=>{
                 console.log(res)
                if(res.isSuccess){
                    this.columnsCompany = res.rows.filter(function(value) {return value.fstate ==1;})
                    searchcheckbyfdetailidwx({
                        fdetailid:this.fdetailid
                    }).then(resp=>{
                        if(resp.isSuccess){
                            this.form.fdetailid = this.fdetailid 
                            this.form.fcustomerid = resp.list[0].fcustomerid
                            this.form.fcustomername= resp.list[0].fcustomername
                            this.form.fproductid = resp.list[0].fproductid
                            this.form.fproductname = resp.list[0].fproductname
                            this.form.fname = resp.list[0].fname
                            this.form.fid = resp.list[0].fid
                        }
                    })
                }
            })
     
        }else{
            this.searchColumns()
        }
        
    },
    methods:{
        searchColumns(){
            searchlimscustomerproductbyuserid({
                userid:'bb5a8fe0-e03e-42ba-a1ed-279bba27b3a3'
            }).then(res=>{
                if(res.isSuccess){
                    this.columnsCompany = res.rows.filter(function(value) {return value.fstate ==1;})
                    console.log(this.columnsCompany)
                }
            })
        },
        submit(){
            this.$validator.validateAll('registerForm').then((valid) => {
                if (valid) {
                    if(this.type == 'add'){
                        insertcheckwx(this.form).then(res=>{
                            Toast.success('添加成功！')
                            this.$router.push({path:"/standardList"});
                        })
                    }else if(this.type == 'edit'){
                        editcheckwx(this.form).then(res=>{
                            Toast.success('修改成功！')
                            this.$router.push({path:"/standardList"});
                        })
                    }
                    console.log(this.form)
                }
            })
        },
        toggle(index) {
            this.$refs.checkboxes[index].toggle();
        },
        toStandardInfo(){
            this.$router.push({path:"/standardInfo"});
        },
        showTimeClick(){
            this.showTime = true
        },
        formatter(type, val) {
            console.log(type)
            if (type === 'year') {
                return `${val}年`;
            } else if (type === 'month') {
                return `${val}月`
            } else if (type === 'day') {
                return `${val}日`
            }
            return val;
        },
        timeConfirm(val){
            this.showTime = false
        },
        timecancel(){
            this.showTime = false
        },
        showImplementClick(){
            this.showImplement = true
        },
        ImplementConfirm(){
            this.showImplement = false
        },
        Implementcancel(){
            this.showImplement = false
        },
        showWorkClick(){
            this.showWork = true
        },
        workConfirm(){
            this.showWork = false
        },
        workCancel(){
            this.showWork = false
        },
        showFunctionClick(){
            searchlimscustomeridbyuserid({
                userid:'bb5a8fe0-e03e-42ba-a1ed-279bba27b3a3'
            }).then(res=>{
                console.log(res)
                if(res.isSuccess){
                    this.columns = res.rows
                    this.showFunction = true
                }
            })
        },
        onCancel4F(){
            this.showFunction = false
        },
        onConfirm4F(val){
            this.form.fproductid = val.fid
            this.form.fproductname = val.fname
            this.showFunction = false
        },
        showLevelClick(){
            this.showLevel = true
        },
        onCancel4L(){
            this.showLevel = false
        },
        onConfirm4L(){
            this.showLevel = false
        },
        showClassClick(){
            this.showClass = true
        },
        onCancel4C(){
            this.showClass = false
        },
        onConfirm4C(){
            this.showClass = false
        },
        showFdeptClick(){
            if(this.type =='edit'){

            }else{
                this.showFdept = true
            }
            
        },
        onCancel4fdeptname(val){
            this.showFdept = false
        },
        onConfirm4fdeptname(val){
            console.log(val.fid)
            this.form.fcustomerid = val.fid
            this.form.fcustomername = val.fname
            this.showFdept = false
    
        },
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
.formTitle{
    line-height: 34px;
    margin-left:16px;
    color: #999
}
.addStandardBtn{
    line-height: 40px;
    width:100%;
    text-align: center;
    position: fixed;
    bottom: 0;
    left:0;
    background-color: #1989fa;
    color:white;  
}
</style>
